<template>
	<view class="page">
		<view class="head">
			<view class="head1">
				<text class="iconfont icon-fenxiang1"  @click="goBack"></text>
				
				
			</view>
		</view>
	
		<view class="main">
			<!-- 搜索 -->
				<view class="search-head">
					
					<view class="search">
						
						<input type="text" v-model="keyword" placeholder="搜索商品" />
					</view>
					
				</view>
				<!-- 商品详情 -->
				
				  <view  class="collection-list">
					<view 
					  v-for="(item, index) in storeList" 
					  :key="index" 
					  class="collection-item"
					  @click="onGoodsList"
					>
					  <image class="shop-image" :src="item.logo" mode="aspectFill"></image>
					  <view class="content">
						<view class="shop-name text-ellipsis">{{item.name}}</view>
						<view class="business-hours">
						  <view class="viewbox">
								<text class="iconfont icon-time2"></text>
								<view>营业时间：{{item.businessHours}}</view>
							</view>
						</view>
					  </view>
					  <view class="right-content">
						<view class="distance"><text class="iconfont icon-dingwei"></text>{{item.distance}}m</view>
						<!-- <view class="collected-btn"><text class="iconfont icon-shoucang1"></text>已收藏</view> -->
						<view class="collect"
						    :style="{ background: item.iscollect ? '#ffdf11' : '#fff', color: item.iscollect ? '#fff' : '#646464' }"
						    @click.stop="collect(item)">
						    <view class="iconfont">
						        <text class="iconfont icon-shoucang"></text>
						        <view class="dingwei" v-if="item.iscollect">已收藏</view>
						        <view class="dingwei" v-else>加入收藏</view>
						    </view>
						</view>
					  </view>
					</view>
				  </view>
				
		</view>
		
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
				  use: false
				},
				keyword: '',
				storeList: [
				  {
				    logo: 'https://pic.nximg.cn/file/20230914/33760392_161909340127_2.jpg',
				    name: '杭州特色小笼包(赤峰红山区)',
				    iscollect: false,
					businessHours: '08:00 - 21:00',
					distance: '354'
				  },
				  {
				    logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.qRz6NYTvrqn23mjgR1GUkwHaE8?w=257&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '北京老北京炸酱面',
				    iscollect: true,
					businessHours: '08:00 - 21:00',
					distance: '354',
				  },
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.aJeK_HFXapSh1Q71AW29ngHaE8?w=263&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '烧烤',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				 
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.erhPYZ6AJKoXhK3HQ3-8CgHaE8?w=277&h=185&c=7&r=0&o=5&pid=1.7',
				    name: '四川麻辣火锅',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				  
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.GmPhy9VPQ_htqErsGSc-ngHaE8?w=220&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '武汉热干面',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				  {
				    logo: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.Cpfbgsjb_Ams72ksnWGIMAHaE8?w=287&h=192&c=7&r=0&o=5&pid=1.7',
				    name: '南京盐水鸭',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: true
				  },
				  {
				    logo: 'https://pic.nximg.cn/file/20230914/33760392_161909340127_2.jpg',
				    name: '杭州特色小笼包(赤峰红山区)',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				  {
				    logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.qRz6NYTvrqn23mjgR1GUkwHaE8?w=257&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '北京老北京炸酱面',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: true
				  },
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.aJeK_HFXapSh1Q71AW29ngHaE8?w=263&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '烧烤',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				  				 
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.erhPYZ6AJKoXhK3HQ3-8CgHaE8?w=277&h=185&c=7&r=0&o=5&pid=1.7',
				    name: '四川麻辣火锅',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				  
				  {
				    logo: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.GmPhy9VPQ_htqErsGSc-ngHaE8?w=220&h=180&c=7&r=0&o=5&pid=1.7',
				    name: '武汉热干面',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: false
				  },
				  {
				    logo: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.Cpfbgsjb_Ams72ksnWGIMAHaE8?w=287&h=192&c=7&r=0&o=5&pid=1.7',
				    name: '南京盐水鸭',
					businessHours: '08:00 - 21:00',
					distance: '354',
				    iscollect: true
				  }
				],
      collectionList: [
        {
          image: '/static/img/banner_01.png',
          name: '杭州特色小笼包（赤峰长青街店）',
          businessHours: '08:00 - 21:00',
          distance: '354'
        },
        // 重复数据用于演示
        {
          image: '/static/img/banner_01.png',
          name: '杭州特色小笼包（赤...',
          businessHours: '08:00 - 21:00',
          distance: '354'
        },
        {
          image: '/static/img/banner_01.png',
          name: '杭州特色小笼包（赤...',
          businessHours: '08:00 - 21:00',
          distance: '354'
        },
        // 重复数据用于演示
        {
          image: '/static/img/banner_01.png',
          name: '杭州特色小笼包（赤...',
          businessHours: '08:00 - 21:00',
          distance: '354'
        },
        {
          image: '/static/img/banner_01.png',
          name: '杭州特色小笼包（赤...',
          businessHours: '08:00 - 21:00',
          distance: '354'
        },
        {
          image: '/static/img/banner_01.png',
          name: '杭州特色小笼包（赤...',
          businessHours: '08:00 - 21:00',
          distance: '354'
        },
		{
		  image: '/static/img/banner_01.png',
		  name: '杭州特色小笼包（赤...',
		  businessHours: '08:00 - 21:00',
		  distance: '354'
		},
		// 重复数据用于演示
		{
		  image: '/static/img/banner_01.png',
		  name: '杭州特色小笼包（赤...',
		  businessHours: '08:00 - 21:00',
		  distance: '354'
		},
		{
		  image: '/static/img/banner_01.png',
		  name: '杭州特色小笼包（赤...',
		  businessHours: '08:00 - 21:00',
		  distance: '354'
		},
		{
		  image: '/static/img/banner_01.png',
		  name: '杭州特色小笼包（赤...',
		  businessHours: '08:00 - 21:00',
		  distance: '354'
		},
      ],
			}
		},
		onLoad(params) {
			this.keyword = decodeURIComponent(params.keyword||'');
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() =>{
					this.mescroll.endByPage(10, 20);
				},2000)
			},
			//收藏
			 collect(item) {
			        item.iscollect = !item.iscollect;
			    },
			/**
			 * 返回点击
			 */
			goBack(){
				uni.navigateBack(-1);
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			
			/**
			 * 商品列表点击
			 */
			onGoodsList(item,index){
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails',
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import  'SearchGoodsList.scss';
</style>
